<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2024年度职业锚测评系统</title>
    <script src="https://unpkg.com/html2pdf.js@0.10.1/dist/html2pdf.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #1a237e;
            margin-bottom: 30px;
            text-align: center;
        }
        .instructions {
            background-color: #e8eaf6;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .instructions p {
            margin: 10px 0;
            line-height: 1.6;
        }
        .instructions strong {
            color: #1a237e;
        }
        .question {
            margin-bottom: 25px;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            border-left: 4px solid #1a237e;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background-color 0.3s ease, border-left-color 0.3s ease;
        }
        .options {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        .option {
            text-align: center;
            margin: 5px;
            flex: 1;
            min-width: 40px;
        }
        .option label {
            display: block;
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .option label:hover {
            background-color: #e8eaf6;
        }
        .option input[type="radio"] {
            margin: 0 5px;
        }
        button {
            display: block;
            margin: 20px auto;
            padding: 12px 25px;
            background-color: #1a237e;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #283593;
        }
        #results {
            margin-top: 30px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            display: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e3e3e3;
            border-radius: 10px;
            margin: 10px 0;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background-color: #1a237e;
            border-radius: 10px;
            transition: width 0.3s ease;
        }
        .warning {
            color: #d32f2f;
            margin-top: 10px;
            display: none;
            text-align: center;
            transition: all 0.3s ease;
        }
        .result-section {
            margin: 20px 0;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        .result-detail {
            margin-top: 20px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .score-detail {
            font-size: 15px;
            color: #1a237e;
            margin-bottom: 10px;
        }
        .button-group {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
        }
        .export-btn {
            background-color: #4caf50;
        }
        .export-btn:hover {
            background-color: #45a049;
        }
        .reset-btn {
            background-color: #f44336;
        }
        .reset-btn:hover {
            background-color: #d32f2f;
        }
        .pdf-content {
            background-color: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }
        @media print {
            .no-print {
                display: none;
            }
        }
        @media screen and (max-width: 480px) {
            .container {
                padding: 15px;
            }
            .option {
                min-width: 40px;
            }
            .options {
                justify-content: space-around;
            }
            .button-group {
                flex-direction: column;
            }
            button {
                width: 100%;
                margin: 5px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>职业锚测评系统</h1>
        
        <div class="instructions">
            <p><strong>评分标准:</strong></p>
            <p>1 = 从不符合 | 2 = 偶尔符合 | 3 = 有时符合 | 4 = 经常符合 | 5 = 频繁符合 | 6 = 总是符合</p>
            <p>请根据您的实际情况,为每个陈述选择最符合的评分。</p>
        </div>

        <div id="questionnaire"></div>
        <div id="warning" class="warning">请确保所有问题都已回答!</div>
        
        <div class="button-group no-print">
            <button onclick="calculateResults()">提交测评</button>
            <button onclick="resetQuestionnaire()" class="reset-btn">重新测评</button>
            <button onclick="exportToPDF()" class="export-btn" id="exportBtn" style="display: none;">导出PDF</button>
            <button onclick="exportToCSV()" class="export-btn" id="exportCSVBtn" style="display: none;">导出CSV</button>
        </div>
        
        <div id="results" class="pdf-content"></div>
    </div>

    <script>
        const questions = [
            "1. 我希望做我擅长的工作,这样我作为行家的建议可以不断被采纳",
            "2. 当我整合并管理其他人的工作时,我非常有成就感",
            "3. 我希望的工作能让我用自己的方式,按自己的计划去开展",
            "4. 对我而言,安定与稳定比自由自主更重要",
            "5. 我一直在寻找可以让我创立自己企业(公司)的创意(点子)",
            "6. 我认为只有对社会做出真正贡献的职业才算是成功的职业",
            "7. 在工作中,我希望去解决那些有挑战性的问题,并且胜出",
            "8. 我宁愿离开公司,也不愿从事需要个人和家庭做出一定牺牲的工作",
            "9. 将我的技术和专业水平发展到一个更具有竞争力的层次是成功的必要条件",
            "10. 我希望能够管理一个大公司(组织),我的决策将会影响许多人",
            "11. 如果职业允许自由地决定自己的工作内容、计划、过程时,我会非常满意",
            "12. 如果工作结果使我丧失了自己在组织中的安全稳定感,我宁愿离开这个工作岗位",
            "13. 对我而言,创办自己的公司比在其他的公司中争取一个高的管理位更更有意义",
            "14. 我的职业满足来自于我可以用自己的才能去为他人提供服务",
            "15. 我认为职业的成就感来自于克服自己面临的非常有挑战性的困难",
            "16. 我希望的职业能够兼顾个人、家庭和工作的需要",
            "17. 对我而言,在我喜欢的专业领域内做资深专家比总经理更具有吸引力",
            "18. 只有在我成为公司的总经理后,我才认为我的职业人生是成功的",
            "19. 成功的职业应该允许我有完全的自主与自由",
            "20. 我愿意在能给我安全感、稳定感的公司中工作",
            "21. 当通过自己的努力或想法完成工作时,我的工作成就感最强",
            "22. 利用自己的才能使世界变得更适合生活或居住,比争取一个高的管理职位更重要",
            "23. 当我解决了看似不可能解决的问题或在必输无疑的竞争中胜出,我会非常有成就感",
            "24. 我认为只有很好地平衡了个人、家庭、职业三者的关系,生活才能算是成功的",
            "25. 我宁愿离开公司,也不愿频繁接受那些不属于我专业领域的工作",
            "26. 对我而言,做一个全面管理者比在我喜欢的专业领域内做资深专家更有吸引力",
            "27. 对我而言,用我自己的方式不受约束地完成工作,比安全、稳定更加重要",
            "28. 只有当我的收入和工作有保障时,我才会对工作感到满意",
            "29. 如果我能成功地创造或发现完全属于自己的产品或点子,我会感到非常成功",
            "30. 我希望从事对人类和社会真正有贡献的工作",
            "31. 我希望工作中有很多机会,可以不断挑战我解决问题的能力(或竞争力)",
            "32. 能很好地平衡个人生活与工作,比达到一个管理职位更重要",
            "33. 如果在工作中能经常用到我特别的技巧和才能,我会感到特别满意",
            "34. 我宁愿离开公司,也不愿意接受让我离开全面管理的工作",
            "35. 我宁愿离开公司,不愿意接受约束自由和自主控制权的工作",
            "36. 我希望有一份让我安全感和稳定感的工作",
            "37. 我梦想创造属于自己的事业",
            "38. 如果工作限制了我为他人提供帮助和服务,我宁愿离开公司",
            "39. 去解决那些几乎无法解决的难题,比获得一个高的管理职位更有意义",
            "40. 我一直在寻找一份能够最大程度地减少个人和家庭之间冲突的工作"
        ];

        const categories = {
            TF: [1, 9, 17, 25, 33],
            GM: [2, 10, 18, 26, 34],
            AU: [3, 11, 19, 27, 35],
            SE: [4, 12, 20, 28, 36],
            EC: [5, 13, 21, 29, 37],
            SV: [6, 14, 22, 30, 38],
            CH: [7, 15, 23, 31, 39],
            LS: [8, 16, 24, 32, 40]
        };

        const typeNames = {
            TF: "技术/职能型",
            GM: "管理型",
            AU: "自主/独立型",
            SE: "安全/稳定型",
            EC: "创造/创业型",
            SV: "服务型",
            CH: "挑战型",
            LS: "生活型"
        };

        const typeDescriptions = {
            TF: "技术/职能型职业锚 Technical/functional Competence。始终不肯放弃的是在专业领域中展示自己的技能，并不断把自己的技术发展到更高层次的机会。希望通过施展自己的技能以获取别人认可，并乐于接受来自于专业领域的挑战，可能愿意成为技术/职能领域的管理者，但管理本身不能给你带来乐趣，极力避免全面管理的职位，因为这意味着你可能会脱离自己擅长的专业领域。",
                GM: "管理型职业锚 General/ManagerialCompetence。始终不肯放弃的是升迁到组织中更高的管理职位，这样能够整合其他人的工作，并对组织中某项工作的绩效承担责任。你希望为最终的结果承担责任，并把组织的成功看作是自己的工作。如果目前在技术/职能部门工作，你会将此看成积累经验的必须过程，你的目标是尽快得到一个全面管理的职位，因为你对技术/职能部门的管理不感兴趣。",
                AU: "自主/独立型职业锚 Autonomy/Independence。始终不肯放弃的是按照自己的方式工作和生活，希望留存能够提供足够的灵活性，并由自己来决定何时及如何工作的组织中。如果你无法忍受任何程度上的公司的约束，就会去寻找一些有足够自由的职业。你宁可放弃升职加薪的机会，也不愿意丧失自己的独立自主性。为了能有最大程度的自主和独立，你可能创立自己的公司，但你的业动机是与后面叙述的创业家的动机是不同的。",
                SE: "安全/稳定型 Security/Stability。始终不肯放弃的是稳定的或终身雇佣的职位。你希望有成功的感觉，这样你才可以放松下来。你关注财务安全(如养老金和退休金方案)和就业安全。你对组织忠诚，对雇主言听计从，希望以此换取终身雇佣的承诺。虽然你可以到达更高的职位，但你对工作的内容和在组织内的等级地位并不关心。任何人(包括自主/独立型)都有安全和稳定的需要，在财务负担加重或面临退休时，这种需要会更加明显。安全/稳定型职业锚的人总是关注安全和稳定问题，并把自我认知建立在如何管理安全与稳定上。",
                EC: "创造/创业职业锚 Entrepreneurial/Creativity。始终不肯放弃的是凭借自己的能力和冒险愿望，扫除障碍，创立属于自己的公司或组织。你希望向世界证明你有能力创建一家企业，现在你可能在某一组织中为别人工作，但同时你会学习并评估未来的机会，一日你认为时机成熟，就会尽快开始白己的创业历程。你希望白己的企业有非常高的现金收入，以证明你的能力。",
                SV: "服务型职业锚 Sense of Service,Dedication to a Cause。始终不肯放弃的是做明显有社会意义的工作，能够得到他人的认可，能够体现自己的价值。他们的职业决策通常基于能否让社会和周围的人事物变得更加美好，如:志愿者、义工。",
                CH: "挑战型职业锚Challenge。始终不肯放弃的是去解决看上去无法解决的问题、战胜强硬的对手或克服面临的困难。对你而言，职业的意义在于允许你战胜不可能的事情。有的人在需要高智商的职业中发现这种纯粹的挑战，例如仅仅对高难度、不可能实现的设计感兴趣的工程师。有些人发现处理多层次的、复杂的情况是一种挑战，例如战略咨询师仅对面临破产、资源消耗尽的客户感兴趣。还有一些人将人际竞争看成是挑战，例如职业运动员，或将销售定义为非赢即输的销售人员。新奇、多变和困难是挑战的决定因素，如果一件事情非常容易，它立马会变得令人厌倦。",
                LS: "生活型职业锚 Lifestyle。始终不肯放弃的是平衡并整合个人的、家庭的和职业的需要。你希望生活中的各个部分能够协调统一向前发展因此你希望职业有足够的弹性允许你来实现这种整合。你可能不得不放弃职业中的某些方面(例如普升带来跨地区调动，可能打乱你的生活)。你与众不同的地方在于过自己的生活，包括居住在什么地方、如何处理家庭事务及在组织内如何发挥自己的作用。"

        };

        function createQuestionnaire() {
            const container = document.getElementById('questionnaire');
            questions.forEach((q, index) => {
                const questionDiv = document.createElement('div');
                questionDiv.className = 'question';
                questionDiv.innerHTML = `
                    <div>${q}</div>
                    <div class="options">
                        ${[1, 2, 3, 4, 5, 6].map(value => `
                            <div class="option">
                                <label>
                                    <input type="radio" name="q${index + 1}" value="${value}">
                                    ${value}
                                </label>
                            </div>
                        `).join('')}
                    </div>
                `;
                container.appendChild(questionDiv);
            });
        }

        function calculateResults() {
            const warning = document.getElementById('warning');
            let hasUnanswered = false;
            
            // 先重置所有问题的样式
            document.querySelectorAll('.question').forEach(q => {
                q.style.borderLeft = '4px solid #1a237e';
                q.style.backgroundColor = '#fff';
            });
            
            // 检查所有问题是否已回答
            for (let i = 1; i <= 40; i++) {
                if (!document.querySelector(`input[name="q${i}"]:checked`)) {
                    hasUnanswered = true;
                    // 找到未回答的问题元素
                    const questionElement = document.querySelector(`input[name="q${i}"]`).closest('.question');
                    // 添加醒目的样式
                    questionElement.style.borderLeft = '4px solid #1a237e';
                    questionElement.style.backgroundColor = '#e8eaf6';
                    questionElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
            
            if (hasUnanswered) {
                warning.style.display = 'block';
                warning.innerHTML = '您还有未完成的题目（已用深色标注），请完成后再提交。';
                warning.style.backgroundColor = '#e8eaf6';
                warning.style.padding = '10px';
                warning.style.borderRadius = '4px';
                warning.style.marginTop = '20px';
                return;
            }
            
            warning.style.display = 'none';

            let scores = {
                TF: 0, GM: 0, AU: 0, SE: 0,
                EC: 0, SV: 0, CH: 0, LS: 0
            };

            // 计算每个维度的得分
            for (let type in categories) {
                categories[type].forEach(qNum => {
                    const selected = document.querySelector(`input[name="q${qNum}"]:checked`);
                    if (selected) {
                        scores[type] += parseInt(selected.value);
                    }
                });
            }

            displayResults(scores);
            document.getElementById('exportBtn').style.display = 'inline-block';
            document.getElementById('exportCSVBtn').style.display = 'inline-block';
        }

        function displayResults(scores) {
            const resultsDiv = document.getElementById('results');
            const maxScore = Math.max(...Object.values(scores));
            
            let html = '<h2>测评结果</h2>';
            
            // 添加总分数展示
            html += '<div class="result-section"><h3>各维度得分</h3>';
            for (let type in scores) {
                const percentage = (scores[type] / 30) * 100;
                html += `
                    <div class="score-detail">
                        <div>${typeNames[type]}: ${scores[type]}分</div>
                        <div class="progress-bar">
                            <div class="progress" style="width: ${percentage}%"></div>
                        </div>
                    </div>`;
            }
            html += '</div>';

            // 添加主导职业锚解释
            const dominantTypes = Object.entries(scores)
                .filter(([_, score]) => score === maxScore)
                .map(([type, _]) => type);

            html += '<div class="result-section"><h3>您的主导职业锚</h3>';
            dominantTypes.forEach(type => {
                html += `
                    <div class="result-detail">
                        <h4>${typeNames[type]}</h4>
                        <p>${typeDescriptions[type]}</p>
                    </div>`;
            });
            html += '</div>';

            resultsDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
            resultsDiv.scrollIntoView({ behavior: 'smooth' });
        }

        function resetQuestionnaire() {
            // 重置所有单选按钮
            const radios = document.querySelectorAll('input[type="radio"]');
            radios.forEach(radio => radio.checked = false);
            
            // 重置所有问题的样式
            document.querySelectorAll('.question').forEach(q => {
                q.style.borderLeft = '4px solid #1a237e';
                q.style.backgroundColor = '#fff';
            });
            
            // 隐藏结果和警告
            document.getElementById('results').style.display = 'none';
            document.getElementById('warning').style.display = 'none';
            document.getElementById('exportBtn').style.display = 'none';
            document.getElementById('exportCSVBtn').style.display = 'none';
            
            // 滚动到顶部
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function exportToPDF() {
            // 创建打印专用容器
            const printContainer = document.createElement('div');
            printContainer.style.padding = '20px';
            printContainer.style.maxWidth = '210mm';
            printContainer.style.margin = '0 auto';
            printContainer.style.backgroundColor = 'white';
            
            // 添加标题和日期
            printContainer.innerHTML = `
                <h1 style="text-align: center; color: #1a237e; margin-bottom: 20px;">职业锚测评结果报告</h1>
                <div style="text-align: right; margin-bottom: 30px;">
                    测评日期：${new Date().toLocaleDateString('zh-CN')}
                </div>
                
                <div class="answers-section" style="margin-bottom: 30px;">
                    <h3>测评选项记录</h3>
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
                        <tr>
                            <th style="border: 1px solid #000; padding: 8px;">题号</th>
                            <th style="border: 1px solid #000; padding: 8px;">问题</th>
                            <th style="border: 1px solid #000; padding: 8px;">选择</th>
                        </tr>
                        ${questions.map((q, i) => {
                            const selected = document.querySelector(`input[name="q${i + 1}"]:checked`);
                            const score = selected ? selected.value : '-';
                            return `
                                <tr>
                                    <td style="border: 1px solid #000; padding: 8px; text-align: center;">${i + 1}</td>
                                    <td style="border: 1px solid #000; padding: 8px;">${q}</td>
                                    <td style="border: 1px solid #000; padding: 8px; text-align: center;">${score}</td>
                                </tr>
                            `;
                        }).join('')}
                    </table>
                </div>
            `;
            
            // 添加测评结果
            const resultsContent = document.getElementById('results').cloneNode(true);
            printContainer.appendChild(resultsContent);
            
            // 保存原始内容
            const originalContent = document.body.innerHTML;
            
            // 替换页面内容
            document.body.innerHTML = '';
            document.body.appendChild(printContainer);
            
            // 添加打印样式
            const style = document.createElement('style');
            style.textContent = `
                @media print {
                    body { margin: 0; padding: 20px; }
                    table { page-break-inside: auto; }
                    tr { page-break-inside: avoid; }
                    .progress-bar { 
                        border: 1px solid #ccc;
                        print-color-adjust: exact;
                        -webkit-print-color-adjust: exact;
                    }
                    .progress {
                        background-color: #1a237e !important;
                        print-color-adjust: exact;
                        -webkit-print-color-adjust: exact;
                    }
                    .result-section {
                        margin: 20px 0;
                        padding: 15px;
                        border: 1px solid #eee;
                        page-break-inside: avoid;
                    }
                    h1, h2, h3, h4 { color: #1a237e !important; }
                    @page {
                        size: A4;
                        margin: 20mm;
                    }
                }
            `;
            document.head.appendChild(style);
            
            // 调用打印
            setTimeout(() => {
                window.print();
                
                // 恢复页面内容
                document.body.innerHTML = originalContent;
                
                // 重新绑定事件
                createQuestionnaire();
                
                // 恢复按钮状态和选项状态
                const exportBtn = document.getElementById('exportBtn');
                const exportCSVBtn = document.getElementById('exportCSVBtn');
                if (exportBtn) exportBtn.style.display = 'inline-block';
                if (exportCSVBtn) exportCSVBtn.style.display = 'inline-block';
                
                // 恢复所有选项的选中状态
                questions.forEach((_, i) => {
                    const selected = document.querySelector(`input[name="q${i + 1}"]:checked`);
                    if (selected) {
                        const value = selected.value;
                        document.querySelector(`input[name="q${i + 1}"][value="${value}"]`).checked = true;
                    }
                });
            }, 500);
        }

        // 修改 exportToCSV 函数
        function exportToCSV() {
            // 准备CSV数据
            let csvContent = '\ufeff'; // 添加BOM标记，确保Excel正确显示中文
            
            // 添加标题和日期
            csvContent += '职业锚测评结果报告\n';
            csvContent += `测评日期,${new Date().toLocaleDateString('zh-CN')}\n\n`;
            
            // 添加选项记录
            csvContent += '题号,问题,选择\n';
            questions.forEach((q, i) => {
                const selected = document.querySelector(`input[name="q${i + 1}"]:checked`);
                const score = selected ? selected.value : '-';
                // 处理CSV中的特殊字符
                const sanitizedQuestion = q.replace(/"/g, '""');
                csvContent += `${i + 1},"${sanitizedQuestion}",${score}\n`;
            });
            
            // 添加空行
            csvContent += '\n';
            
            // 添加得分统计
            csvContent += '维度,得分,说明\n';
            const scores = {
                TF: 0, GM: 0, AU: 0, SE: 0,
                EC: 0, SV: 0, CH: 0, LS: 0
            };
            
            // 计算每个维度的得分
            for (let type in categories) {
                categories[type].forEach(qNum => {
                    const selected = document.querySelector(`input[name="q${qNum}"]:checked`);
                    if (selected) {
                        scores[type] += parseInt(selected.value);
                    }
                });
                csvContent += `${typeNames[type]},${scores[type]},"${typeDescriptions[type]}"\n`;
            }
            
            // 创建并下载CSV文件
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = '职业锚测评结果.csv';
            link.click();
            URL.revokeObjectURL(link.href);
        }

        // 页面加载时创建问卷
        window.onload = createQuestionnaire;
    </script>
</body>
</html>